<template>
  <div class="remote-control">
    <!--<div class="modul-box">
      <div class="modul-header">
        <span>集成状态：运行</span>
        <span>用户状态：维护人员</span>
      </div>

      <div class="modul-body">
        <ul class="instrument-list clear">
          <li v-for="(item,index) in instrumentList" :key="index">
            <div class="title">{{item.name}}</div>
            <p>状态：{{item.state}}</p>
            &lt;!&ndash; <p>{{item.process}}</p> &ndash;&gt;
            <div class='btn-wrap clear'>
                <el-button @click="transmit('空白校准')" class="item-btn">空白校准</el-button>
                <el-button @click="transmit('标样校准')" class="item-btn">标样校准</el-button>
                <el-button @click="transmit('零点核查')" class="item-btn">零点核查</el-button>
                <el-button @click="transmit('跨度核查')" class="item-btn">跨度核查</el-button>
                <el-button @click="transmit('提取时间')" class="item-btn">提取时间</el-button>
                <el-button @click="transmit('仪器校时')" class="item-btn">仪器校时</el-button>
                <el-button @click="transmit('提取参数')" class="item-btn">提取参数</el-button>
                <el-button @click="transmit('提取状态')" class="item-btn">提取状态</el-button>
                <el-button @click="transmit('提取日志')" class="item-btn">提取日志</el-button>
            </div>
            <p>试剂余量：{{ item.leftover }}</p>
          </li>
        </ul>
      </div>
    </div>-->
    <yf-tabs type="border-card" style="height: 100%">
      <yf-tab-pane label="仪器">
        <ul class="instrument-list clear">
          <li v-for="(item,index) in instrumentList" :key="index">
            <div class="title">{{item.codeName}}</div>
            <p>状态：{{item.status && item.status.i12001?item.status.i12001.describe:'-'}}</p>
             <p>{{item.status && item.status.i11001?item.status.i11001.describe:'-'}}</p>
            <div class='btn-wrap clear'>
              <el-button @click="transmit(item,'3085')" class="item-btn">空白校准</el-button>
              <el-button @click="transmit(item,'3086')" class="item-btn">标样校准</el-button>
              <el-button @click="transmit(item,'3083')" class="item-btn">零点核查</el-button>
              <el-button @click="transmit(item,'3084')" class="item-btn">跨度核查</el-button>
              <el-button @click="transmit(item,'1011')" class="item-btn">提取时间</el-button>
              <el-button @click="transmit(item,'1012')" class="item-btn">仪器校时</el-button>
              <el-button @click="openParameters(item,'3020','param')" class="item-btn">提取参数</el-button> <!-- transmit(item,'3020','param') -->
              <el-button @click="openState(item,'3020','state')" class="item-btn">提取状态</el-button> <!-- transmit(item,'3020','state') -->
              <el-button @click="openExtractLogs(item,'3020','log')" class="item-btn">提取日志</el-button><!-- transmit(item,'3020','log') -->
            </div>
            <p>试剂余量：{{ item.status && item.status.i12003 ?item.status.i12003.describe:'-'}} %</p>
          </li>
        </ul>
      </yf-tab-pane>
      <yf-tab-pane label="集成">
        <div class="control-box clear">
          <span class="title"> 控制单元设置 </span>
          <div class="control-right">
            <div class="row">
              <i class="el-icon-time"></i>
              <el-button @click="transmit('','3084')">提取</el-button>
              <el-button @click="transmit('','1015')">校时</el-button>
              <span class="boot-time-text">开机时间：{{bootTime}}</span>
            </div>
            <div class="row">
              <i class="el-icon-switch-button"></i>
              <el-button @click="transmit('','3043')">重启</el-button>
              <el-button @click="transmit('','3046')">远程控制系统进入待机</el-button>
              <el-button @click="transmit('','3044')">远程启动系统单次测试</el-button>
            </div>
            <div class="row">
              <span>运行模式：</span>
              <div class="layoutBox" style="width:160px">
                <el-select v-model="modeValue"
                           @change="modeValueChange"
                           clearable placeholder="请选择">
                  <el-option
                    v-for="item in operation"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>&emsp;
              <!--<span v-if="modeValue === '1'">测量间隔：</span>
              <div v-if="modeValue === '1'" class="layoutBox" style="width:160px">
                <el-select v-model="measuringVal" clearable placeholder="请选择">
                  <el-option
                    v-for="item in measuringOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>&emsp;-->
              <el-button disabled>提取</el-button>
              <el-button @click="transmit('','3042')">设置</el-button>
            </div>
            <div class="row">
              <span>修改密码：</span>
              <div class="layoutBox" style="width:160px">
                <el-input v-model="password" placeholder="请输入密码"></el-input>
              </div>&emsp;
              <el-button @click="transmit('','1072')">设置</el-button>
            </div>
            <div class="row">
              <span>运行周期：</span>
              <div class="layoutBox" style="width:160px">
                <el-select v-model="cycleValue" clearable placeholder="请选择" @change="">
                  <el-option
                    v-for="item in cycleOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>&emsp;
              <el-button @click="transmit('','3056')">设置</el-button>
            </div>
            <div class="row">
              <span>实时数据间隔：</span>
              <div class="layoutBox" style="width:104px">
                <el-input v-model="intervalData" placeholder="请输入"></el-input>
              </div>
              <span>分钟</span>&emsp;
              <el-button @click="transmit('','1061')">提取</el-button>
              <el-button @click="transmit('','1062')">设置</el-button>
            </div>
            <div class="row">
              <span>超时重发间隔：</span>
              <div class="layoutBox" style="width:90px">
                <el-input-number v-model="recurrence" controls-position="right" :min="0"></el-input-number>
              </div>
              <span>秒</span>&emsp;
              <span>次数：</span>
              <div class="layoutBox" style="width:90px">
                <el-input-number v-model="frequency" controls-position="right" :min="0"></el-input-number>
              </div>
              <span>次</span>&emsp;
              <el-button @click="transmit('','1000')">设置</el-button>
            </div>
          </div>
        </div>
        <div class="control-box clear">
          <span class="title"> 质控测试 </span>
          <div class="control-right">
            <div class="row">
              <span>监测参数：</span>
              <div class="layoutBox" style="width:120px">
                <el-select v-model="parametersValue" clearable placeholder="请选择">
                  <el-option
                    v-for="item in parametersOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>&emsp;
              <!-- <span>加标体积：</span>
              <div class="layoutBox" style="width:120px">
                <el-input v-model="volume" placeholder="请输入加标体积"></el-input>
              </div>
              <span>（ml）</span>&emsp; -->
              <el-button @click="transmit('','3081')">加标回收率</el-button>
            </div>
          </div>
        </div>
        <div class="control-box clear">
          <span class="title"> 数据补采 </span>
          <div class="control-right">
            <div class="row">
              <span>时间区间：</span>
              <div class="layoutBox" style="width:370px">
                <el-date-picker
                  v-model="dateRange"
                  type="datetimerange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </div>&emsp;
              <span>数据类型：</span>
              <div class="layoutBox" style="width:120px">
                <el-select v-model="dataType" clearable placeholder="请选择">
                  <el-option
                    v-for="item in dataTypeOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>&emsp;
              <el-button @click="transmit('','collection')">采集</el-button>
            </div>
          </div>
        </div>
        <div class="control-box clear">
          <span class="title"> 留样器控制 </span>
          <div class="control-right">
            <el-button @click="transmit('','3015')">手动远程留样</el-button>
          </div>
        </div>
      </yf-tab-pane>
    </yf-tabs>

    <el-dialog
      :visible.sync="logDialog"
      width="476px"
      title="选择时间"
      :before-close="closess">
      <div class="content-wrap">
        <div class="row">
          <span>时间段：</span>
          <div class="layoutBox" style="width:370px">
            <el-date-picker
              v-model="dateRangeLog"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </div>&emsp;
        </div>
        <div class="row" style="text-align: center;margin-top: 20px;">
          <el-button @click="submitExtractLogs()">提取日志</el-button>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="selectParams"
      width="476px"
      title="选择参数"
      :before-close="closess">
      <div class="content-wrap">
        <div class="row">
          <span>参数类型：</span>
          <div class="layoutBox" style="width:340px">
            <el-select v-model="paramValue" collapse-tags placeholder="请选择">
              <el-option
                v-for="item in paramOption"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>&emsp;&emsp;
        </div>
        <div class="row" style="text-align: center;margin-top: 20px;">
          <el-button @click="submitParameters()">提取参数</el-button>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="selectState"
      width="476px"
      title="选择状态"
      :before-close="closess">
      <div class="content-wrap">
        <div class="row">
          <span>状态类型：</span>
          <div class="layoutBox" style="width:340px">
            <el-select v-model="stateValue" collapse-tags placeholder="请选择">
              <el-option
                v-for="item in stateOption"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>&emsp;&emsp;
        </div>
        <div class="row" style="text-align: center;margin-top: 20px;">
          <el-button @click="submitState()">提取状态</el-button>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: 'remoteControl',
  data(){
    return {
      logDialog: false,
      bootTime:'',
      password:'',
      dateRangeLog:'',
      instrumentList:[],
      instrumentListA:[
        {
        name:'高锰酸盐',
        code:'w01019',
        state:'空闲',
        process:'清洗',
        leftover:'1%'
      },{
        name:'氨氮',
        code:'w21003',
        state:'空闲',
        process:'清洗',
        leftover:'0%'
      },{
        name:'总磷',
        code:'w21011',
        state:'空闲',
        process:'清洗',
        leftover:'2%'
      },{
        name:'总氮',
        code:'w21001',
        state:'空闲',
        process:'清洗',
        leftover:'4%'
      }
      ],
      instrumentListB:[
        {
          name:'CODcr',
          code:'w01018',
          state:'空闲',
          process:'清洗',
          leftover:'1%'
        },{
          name:'氨氮',
          code:'w21003',
          state:'空闲',
          process:'清洗',
          leftover:'0%'
        },{
          name:'总磷',
          code:'w21011',
          state:'空闲',
          process:'清洗',
          leftover:'2%'
        },{
          name:'总氮',
          code:'w21001',
          state:'空闲',
          process:'清洗',
          leftover:'4%'
        }
      ],
      modeValue:'',
      operation:[
        {
          value:'1',
          label:'正常模式',
        },{
          value:'2',
          label:'维护模式',
        },{
          value:'3',
          label:'质控模式',
        },{
          value:'4',
          label:'应急模式',
        },{
          value:'5',
          label:'自定义模式',
        }
      ],
      measuringVal:'',//测量间隔
      measuringOption:[
        {
          value:'2',
          label:'2小时',
        },{
          value:'3',
          label:'3小时',
        },{
          value:'4',
          label:'4小时',
        },{
          value:'6',
          label:'6小时',
        },{
          value:'8',
          label:'8小时',
        },{
          value:'12',
          label:'12小时',
        },{
          value:'24',
          label:'24小时',
        }
      ],
      cycleValue:'',
      cycleOption:[
        {
          value:'1',
          label:'1h/次',
        },{
          value:'2',
          label:'2h/次',
        },{
          value:'3',
          label:'3h/次',
        },{
          value:'4',
          label:'4h/次',
        }
      ],
      intervalData:'',
      recurrence:'',
      frequency:'',
      parametersOption:[
        {
          value: "w01019",
          label: "高锰酸盐"
        },
        {
          value: "w21003",
          label: "氨氮"
        },
        {
          value: "w21011",
          label: "总磷"
        },
        {
          value: "w21001",
          label: "总氮"
        }
      ],
      parametersValue:'',
      volume:'0',
      dataType:'',
      dataTypeOption:[
        {
          value: "2011",
          label: "实时数据"
        },{
          value: "2061",
          label: "小时数据"
        },{
          value: "2062",
          label: "核查数据"
        },{
          value: "2063",
          label: "加标回收数据"
        },{
          value: "2065",
          label: "零点核查数据"
        },{
          value: "2066",
          label: "跨度核查数据"
        },{
          value: "jcstate",
          label: "集成状态"
        },{
          value: "jclog",
          label: "集成日志"
        }
      ],
      dateRange:'',
      stationId:'',
      logParams:{},
      selectParams: false,//打开与关闭选择参数弹窗
      paramValue:'',//选择参数绑定值
      paramOption:[
        {
          value:'i13001',
          label:'测量量程',
        },{
          value:'i13002',
          label:'测量精度',
        },{
          value:'i13003',
          label:'测量间隔',
        },{
          value:'i13004',
          label:'消解温度',
        },{
          value:'i13005',
          label:'消解时长',
        },{
          value:'i13006',
          label:'空白校准时间',
        },{
          value:'i13007',
          label:'曲线截距',
        },{
          value:'i13008',
          label:'曲线斜率',
        },{
          value:'i13009',
          label:'测量检出限',
        },{
          value:'i13010',
          label:'测量信号值',
        },{
          value:'i13011',
          label:'线性相关系数（R²）',
        },{
          value:'i13012',
          label:'二次多项式系数',
        },{
          value:'i13013',
          label:'标准样校准时间',
        }
      ],
      parameters:{},
      stateValue:'',
      stateOption:[
        {
          value:'i12001',
          label:'工作状态',
        },{
          value:'i12002',
          label:'分析仪与数采仪通讯状态',
        },{
          value:'i12003',
          label:'反应试剂余量',
        },{
          value:'i12031',
          label:'分析仪报警状态',
        }
      ],
      selectState: false,
      stateParam:{},
      siteType:'',
    }
  },
  methods:{
    modeValueChange(val){
     if(val === '1'){
       this.measuringVal = '2';
     }
    },
    transmit(item,cn,condition){
      console.log(item);
      let code = item ? item.status.i11001.factorCode : '';
      let con = condition ? condition : '';
      let pass = '123456';
      if(cn === '3042'){
        if(this.modeValue === ''){
          this.$message({
            message:'请选择运行模式！',
            type:'warning'
          });
          return false;
        }/*else if(this.modeValue === '1'){
          con = this.modeValue+','+ this.measuringVal;
        }*/else{
          con = this.modeValue;
        }
      }else if(cn === '1072'){
        if(this.password === ''){
          this.$message({
            message:'请输入数采仪密码！',
            type:'warning'
          });
          return false;
        }else{
          con = this.password;
        }
      }else if(cn === '3056'){
        if(this.cycleValue === ''){
          this.$message({
            message:'请选择运行周期！',
            type:'warning'
          });
          return false;
        }else{
          con = this.cycleValue;
        }
      }else if(cn === '1062'){
        if(this.intervalData === ''){
          this.$message({
            message:'请输入实时数据间隔！',
            type:'warning'
          });
          return false;
        }else{
          con = this.intervalData;
        }
      }else if(cn === '1000'){
        con = this.recurrence + ',' + this.frequency;
      }else if(cn === '3081'){
        con = this.parametersValue + ',' + this.volume;
      }else if(cn === 'collection'){
        let time = this.dateRange[0].format('yyyyMMddhhmmss')+','+this.dateRange[1].format('yyyyMMddhhmmss');
        if(this.dataType === 'jcstate'){
          con = 'jcstate,'+time;
          cn = '3020';
        }else if(this.dataType === 'jclog'){
          con = 'jclog,'+time;
          cn = '3020';
        }else{
          con = time;
          cn = this.dataType;
        }
      }
      this.$http.get("/Receiving/sendBackControl", {
        params: {
          mn:this.stationId,
          password:pass,
          projectCode: code,
          cn:cn,
          condition:con
        }
      }).then(res=>{
        if(res.data.code === 0){
          if(cn === '3020'){
            this.selectParams = false;
            this.selectState = false;
            this.logDialog = false;
          }
        }
        this.$message({
          message:res.data.content.info,
          type:'success'
        });
      })
    },
    //打开提取日志弹窗
    openExtractLogs(item,cn,con){
      this.logDialog = true;
      this.logParams = {
        item,
        cn,
        con
      };
      this.dateRangeLog = [new Date(new Date().setDate(new Date().getDate() - 1)),new Date()];
    },
    //提交提取日志
    submitExtractLogs(){
      let time = this.dateRangeLog[0].format('yyyyMMddhhmmss')+','+this.dateRangeLog[1].format('yyyyMMddhhmmss');
      this.logParams.con += ','+time;
      // console.log(this.logParams.con);
      this.transmit(this.logParams.item,this.logParams.cn,this.logParams.con);
    },
    //打开提取参数弹窗
    openParameters(item,cn,con){
      this.selectParams = true;
      this.parameters = {
        item,
        cn,
        con
      };
    },
    //提交提取参数
    submitParameters(){
      this.parameters.con += ',' + this.paramValue;
      this.transmit(this.parameters.item,this.parameters.cn,this.parameters.con);
    },
    //打开提取状态弹窗
    openState(item,cn,con){
      this.selectState = true;
      this.stateParam = {
        item,
        cn,
        con
      };
    },
    submitState(){
      this.stateParam.con += ',' + this.stateValue;
      this.transmit(this.stateParam.item,this.stateParam.cn,this.stateParam.con);
    },
    //获取仪器数据
    getInstrumentalData(){
      this.$http.get('/Receiving/queryEquipmentInfos',{
        params:{
          mn: this.stationId,
          stationType:this.siteType
        }
      }).then((res)=>{
          console.log(res);
          if(res.data.code === 0){
            this.instrumentList = res.data.content.dataList;
          }
      }).catch((error)=>{

      });
    }
  },
   created(){
      this.$store.commit('setShowlefttree',true);
      this.bootTime = new Date().format('yyyy-MM-dd hh:mm:ss');
  },
  computed: {
    stationInfo: {
      get: function() {
        return this.$store.state.stationInfo;
      }
    }
  },
  watch: {
    stationInfo(value) {
      if (value.length > 0) {
        this.stationId = value[0].nodeId;
        this.siteType = value[0].stationType1;
        // if(value[0].stationType1 === '002'){
        //   this.instrumentList = this.instrumentListB;
        // }else{
        //   this.instrumentList = this.instrumentListA;
        // }
        this.$nextTick(()=>{
          this.getInstrumentalData();
        })
      }
    }
  }
}
</script>

<style scope lang="less">
.remote-control{
  height:100%;
  .modul-box{
    height: 100%;
    border:1px solid #d6e3f2;
    .modul-header{
      height: 36px;
      border-bottom: 1px solid #d6e3f2;
      line-height: 35px;
      padding-left: 10px;
      font-size: 14px;
    }
    .modul-body{
      height: calc(100% - 36px);
    }
  }
}
.instrument-list{
  padding: 10px 16px;
  &>li{
    padding: 8px;
    border: 1px solid #ccc;
    box-shadow: 2px -3px 7px #ccc;
    width: 216px;
    float: left;
    border-radius: 6px;
    text-align: center;
    margin-right: 16px;
    .title{
      border-radius: 3px;
      line-height: 26px;
      background: #048b16;
      color: #fff;
      font-size: 14px;
    }
    &>p{
      color: #3f4353;
      line-height: 22px;
    }
    .btn-wrap{
      text-align: left;
      .item-btn{
        margin-bottom: 12px;
        margin-left: 12px;
      }
    }
  }
}
.control-box{
  border: 1px solid #d6e3f2;
  display: table;
  width: 100%;
  margin-bottom: 10px;
  &:last-child{
    margin-bottom: 0;
  }
  .title{
    display: table-cell;
    width: 130px;
    vertical-align: middle;
    text-align: center;
    border-right: 1px solid #d6e3f2;
    font-size: 15px;
    font-weight: 700;
    color: #666666;
  }
  .control-right{
    display: table-cell;
    width: calc(100% - 130px);
    vertical-align: middle;
    padding: 10px 20px;
    .row{
      margin-bottom: 10px;
      &:last-child{
        margin-bottom: 0;
      }
      &>i{
        display: inline-block;
        margin-right: 10px;
        font-size: 30px;
        line-height: 30px;
        color: #ccc;
      }
    }
  }
}
  .boot-time-text{
    display: inline-block;
    vertical-align: top;
    line-height: 30px;
  }
</style>
